<template>
  <div style="padding: 20px">
     <a-table
      :rowKey="pk"
      :columns="columns"
      :dataSource="dataSource"
      :loading="tableLoading"
      :size="size"
      :bordered="bordered"
      :scroll="scroll"
      :rowSelection="
        mode !== 'checkbox' && mode !== 'radio'
          ? null
          : {
              type: mode,
              selectedRowKeys: selectedRowKeys,
              fixed: true,
              onChange: onSelectChange,
            }
      "
      :pagination="
        !pagination
          ? false
          : {
              current: pageNo,
              pageSize: pageSize,
              total: total,
              showSizeChanger: true,
              size: 'small',
              pageSizeOptions: ['10', '20', '30'],
              showTotal: (total) => `共 ${total} 条`,
              onChange: jumpPage,
              onShowSizeChange: changePageSize,
            }
      "
    >
      <template
        v-for="(func, name) of $scopedSlots"
        v-slot:[name]="text, record, index"
      >
        <template v-if="name === 'no'">
          <slot
            :name="name"
            v-bind="
              Object.assign(record, { index: (pageNo - 1) * pageSize + index })
            "
          ></slot>
        </template>
        <template v-else-if="name === 'expandedRowRender'">
          <slot :name="name" v-bind="text"></slot>
        </template>
        <template v-else>
          <slot :name="name" v-bind="record"></slot>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    pk: { type: String, default: 'id' },
    columns: { type: Array, default: () => [] },
    dataSource: { type: Array, default: () => [] },
    tableLoading: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
    pagination: { type: Boolean, default: true },
    total: { type: Number, default: 0 },
    size: { type: String, default: 'default' },
    mode: { type: String, default: '' },
    active: { type: Array, default: () => [] },
    scroll: { type: Object, default: () => {} }
  },
  data () {
    return {
      selectedRowKeys: this.active,
      pageNo: 1,
      pageSize: 10
    }
  },
  methods: {
    jumpPage (pageNo, pageSize) {
      this.pageNo = pageNo || this.pageNo
      this.pageSize = pageSize || this.pageSize
      this.$emit('queryData', { pageNo: pageNo, pageSize: pageSize })
    },
    changePageSize (pageNo, pageSize) {
      this.pageNo = 1
      this.pageSize = pageSize
      this.$emit('queryData', { pageNo: 1, pageSize: pageSize })
    },
    // 选中，取消选中
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      this.$emit('select', this.selectedRowKeys)
    },
    // 清空selectedRowKeys
    clearSelect () {
      this.selectedRowKeys = []
    },
    // 在父组件刷新数据时调用子组件传入当前分页参数
    refreshData () {
      this.$emit('queryData', { pageNo: this.pageNo, pageSize: this.pageSize })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
